<!-- @format -->
<template>
	<view>
		<view class="example">
			<block v-for="(item, index) in formDatas" :key="index">
				<!-- 设为常用预定人 -->
				<view class="content-box">
					<view class="person-title-box" v-if="item[0].typeName && index < 2">
						<view class="title">
							{{ item[0].typeName ? item[0].typeName : "" }}
						</view>
						<view class="common-trip" @click="handleSelectChange(item, index)" v-if="index < 1"
						:data-spmCntSuffix="'.commonTrip@1.handleSelectChange@'"
						:data-custom="1"
						:data-spm="{'pos': '设为默认联系人'}">
							<text class="select-text"> 设为默认联系人 </text>
							<view class="select-icon" :class="{ active: selectChecked }">
							</view>
						</view>
					</view>
					<!-- 出行人或预订人信息 -->
					<view class="visitor-box" :class="{ 'visitor-info-box': index !== 0 }">
						<view class="need-number-people" v-if="index == 1">
							<text>需选择{{ travellerNumber }}位出行人<text v-if="contactsLists.length > 0">,已选择{{
								selectedItem.length }}位</text></text>
							<view v-if="contactsLists.length == 0" class="add-btn-box" @click="handlerAdd"
							:data-spmCntSuffix="'.addBtnBox@1.handlerAdd@'"
							:data-custom="1"
							:data-spm="{'pos': '添加出行人'}">
								<image class="add-icon-img" src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/icon_add.png">
								</image>
								添加出行人
							</view>
						</view>
						<view class="contacts-list-box" v-if="item[0].typeName && index == 1">
							<block v-for="(contact, contactIndex) in contactsLists" :key="contactIndex">
								<view class="contacts-item" :class="{ active: contact.disabled }"
									@click="handleSelectContact(contact, index, contactIndex)"
									:data-spmCntSuffix="'.contactsListBox@1.handleSelectContact@'"
									:data-custom="1"
									:data-spm="{'pos': 'image'}">
									{{ contact.contactName }}
									<image v-if="contact.disabled" class="contact-icon"
										src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-4.png"
										mode="aspectFill" lazy-load="false">
									</image>
								</view>
							</block>
							<view class="contacts-item more" @click="handleSelectMore(contact, index, contactIndex)"
								:data-spmCntSuffix="'.contactsItem@1.handleSelectMore@'"
								:data-custom="1"
								:data-spm="{'pos': '新增/更换'}"
								v-if="contactsList.length > 0">
								<view class="text-box">
									<text>新增</text>
									<text>更换</text>
								</view>
								<uni-icons type="right" size="12" color="#AAAAAA"></uni-icons>
							</view>
						</view>

						<view class="input-group" v-if="isShowContact(item, index)">
							<image v-if="index > 0" @click="handlerDelete(item, item[0].contactId)" class="icon-delete"
								mode="aspectFill" lazy-load="false"
								src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/close_gry.png"
								:data-spmCntSuffix="'.inputGroup@1.handlerDelete@'"
								:data-custom="1"
								:data-spm="{'pos': 'close'}">
							</image>
							<view class="input-box-group">
								<view class="inputBox" v-for="(inputitem, inputindex) in item" :key="inputindex">
									<view class="input-box" :class="inputitem.inputType == 55 && inputitem.validateType == 171 ? 'image' : ''">
										<view class="label">{{ inputitem.customerInfo }}</view>
										<view class="required" v-if="index == 0">*</view>
										<block v-if="!inputitem.contactId && inputitem.customerInfoId != 71
											">
											<!-- 手动输入 中文校验 -->
											<view class="box-input" v-if="(inputitem.validateType == 65 ||
												inputitem.validateType == 63 ||
												inputitem.validateType == 59 ||
												inputitem.validateType == 64) &&
												inputitem.inputType == 51
												" :class="{ 'box-input-text': index > 0 }" @click="handlerEdit(item, index)"
												:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
												:data-custom="1"
												:data-spm="{'pos': 'input'}">
												<view v-if="index > 0" class="input-edit-box">
													{{ inputitem.inputValue }}
												</view>
												<!-- 预订人 -->
												<input v-if="index == 0" :placeholder="'请输入' + inputitem.customerInfo"
													v-model="inputitem.inputValue" type="text" />
											</view>
											<!-- 手动输入 手机号校验 -->
											<view class="box-input" v-if="inputitem.validateType == 60 &&
												inputitem.inputType == 51
												" @click="handlerEdit(item, index)"
												:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
												:data-custom="index"
												:data-spm="inputitem">
												<view class="phone-number">
													<view bindtap="selectPhone">
														+
														<text>86</text>
													</view>
												</view>
												<view v-if="index > 0" class="input-edit-box">
													{{ inputitem.inputValue }}
												</view>
												<!-- 预订人 -->
												<input v-if="index == 0" :placeholder="'请输入' + inputitem.customerInfo"
													v-model="inputitem.inputValue" type="number" maxlength="11" />
											</view>
											<!-- 下拉选择 -->
											<view v-if="inputitem.inputType == 54 &&
												inputitem.customerInfoId != 41
												" class="box-input">
												<picker style="width: 100%" @change="
													bindPickerChange(
														$event,
														inputitem,
														index,
														inputindex
													)
													" :value="carIndex" :range="inputitem.papersArr">
													<view class="uni-input certificate-box">{{
														inputitem.valueType
														? 1
															? getInfoValue(inputitem)
															: inputitem.valueType
														: "请选择"
													}}</view>
												</picker>
											</view>
											<!-- 下拉选择 证件类型 -->
											<view v-if="inputitem.inputType == 54 &&
													inputitem.customerInfoId == 41
													" class="box-input" @click="handlerEdit(item, index)"
													:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
													:data-custom="index"
													:data-spm="inputitem">
												<!-- <picker style="width: 100%" @change="bindPickerChange2($event, inputitem, index, inputindex)" range-key="name" :value="carIndex" :range="inputitem.papersArr"> -->
												<view class="uni-input">{{
													inputitem.valueType ? inputitem.valueType : "请选择"
												}}</view>
												<!-- </picker> -->
											</view>
											<!-- 单选性别 -->
											<view v-if="inputitem.inputType == 52" class="box-input"
												@click="handlerEdit(item, index)">
												<radio-group @change="
													radioChange($event, inputitem, index, inputindex)
													">
													<label class="radio" v-for="(sexitem, sexindex) in sexArr"
														:key="sexindex">
														<radio :value="sexitem.name" :checked="sexindex === current" />
														{{ sexitem.name }}
													</label>
												</radio-group>
											</view>
											<!-- 手动输入 正整数|数字|双精度 -->
											<view v-if="(inputitem.validateType == 62 ||
												inputitem.validateType == 61 ||
												inputitem.validateType == 66) &&
												inputitem.inputType == 51
												" class="box-input input-edit-box" @click="handlerEdit(item, index)"
												:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
												:data-custom="index"
												:data-spm="item"><input
													:placeholder="'请输入' + inputitem.customerInfo"
													v-model="inputitem.inputValue" type="number" />
											</view>
											<!-- 日期选择 -->
											<view v-if="inputitem.inputType == 56 || inputitem.inputType == 58
												" class="box-input" @click="handlerEdit(item, index)"
												:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
												:data-custom="index"
												:data-spm="item">
												<picker mode="date" :value="selectDate" :start="startDate" :end="endDate"
													@change="
														bindDateChange($event, inputitem, index, inputindex)
														">
													<!--                      <view class="uni-input">{{ inputitem.valueType ? inputitem.customerInfoId == 41 ? getInfoValue(inputitem) : inputitem.valueType : '请选择' }}</view>-->
													<view class="uni-input">{{
														inputitem.valueType ? inputitem.valueType : "请选择"
													}}</view>
												</picker>
											</view>
											<!-- 时间选择 -->
											<view v-if="inputitem.inputType == 57" class="box-input"
												@click="handlerEdit(item, index)"
												:data-spmCntSuffix="'.boxInput@1.handlerEdit@'"
												:data-custom="index"
												:data-spm="item">
												<picker mode="time" :value="selectTime" start="00:00" end="24:00" @change="
													bindTimeChange($event, inputitem, index, inputindex)
													">
													<view class="uni-input">{{
														inputitem.valueType ? inputitem.valueType : "请选择"
													}}</view>
												</picker>
											</view>
										</block>
										<view v-else class="box-input">
											<block v-if="inputitem.inputValue">
												<image class="label-img" mode="heightFix" :src="inputitem.inputValue" v-if="inputitem.inputType == 55 && inputitem.validateType == 171" />
												<view v-else>{{
													inputitem.inputValue
												}}</view>
											</block>
											<view v-else class="red-box">
												<uni-icons type="info-filled" size="15" color="red"></uni-icons>请补充信息
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="edit-box" v-if="index > 0" @click="handlerEdit(item, index)"
								:data-spmCntSuffix="'.editBox@1.handlerEdit@'"
								:data-custom="index"
								:data-spm="item">
								<text>编辑</text>
								<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 选择出行人 -->
		<popup ref="selectPopup" position="bottom">
			<select-item v-if="isRefresh" @handerFinish="handerFinish" @handlerAdd="handlerAdd" @close="
				isRefresh = false&
			$refs.selectPopup.$refs.popup.close()
				" @selectedCallback="selectedCallback" @edit="handlerEdit" :travellerNum="travellerNumber"
				:contactsList="contactsList" :selectedItem="selectedItem" :form-data="formData[1]"></select-item>
		</popup>
		<!-- 编辑出行人 -->
		<popup ref="editPopup" position="bottom">
			<edit :form-data="editFormData" ref="popForm" :contactsList="contactsList" :editType="editType"
				@close="editClose" @success="getContactsList"></edit>
		</popup>
	</view>
</template>

<script>
import request from "../../utils/request/request.js"
import { readySubmit } from "../../utils/common.js"
import edit from "../../components/formBox/edit.vue"
import selectItem from "../formBox/select-item.vue"
import popup from "../popupWithClose/popupWithClose.vue"
import { Events } from "../../utils/constants.js"

export default {
	components: {
		popup,
		edit,
		selectItem
	},
	props: {
		//表单数据
		formData: {
			type: Array,
			default: []
		},
		//输入框边框
		inputBorder: {
			type: Boolean,
			default: false
		},
		papersArr: {
			type: Array,
			default: []
		},
		// contactsList: Array,
		travellerNum: {
			// 出行人个数
			type: Number,
			default: 1
		},
		// 是否需要多份
		visitorCopies: {
			type: Boolean,
			default: true
		}
	},
	//validateTypeId//验证框类型 59，邮箱格式 60，手机格式 61，数字格式 62，正整数格式 63，中文格式 64，纯英文字母 65，单独非空 66，双精度 67，日期 68，时间 69，日期时间格式
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			isRefresh: true,
			editFormData: [{}], // 编辑/新增出行人
			editType: "",
			dynamicRules: {
				email: {}
			},
			formAddFlag: false,
			carIndex: 0,
			sexArr: [
				{
					name: "男",
					id: 0
				},
				{
					name: "女",
					id: 1
				}
			],
			current: -1,
			selectDate: currentDate,
			addFlagElse:false,
			selectTime: "09:00",
			selectChecked: false, // 是否选择默认预订人
			contactsList: []
		}
	},
	computed: {
		travellerNumber: {
			get() {
				return this.visitorCopies ? this.travellerNum : 1
			}
		},
		formDatas: {
			get() {
				return this.formData
			},
			set() { }
		},
		startDate() {
			return this.getDate("start")
		},
		endDate() {
			return this.getDate("end")
		},
		contactsLists() {
			return this.contactsList.slice(0, 3)
		},
		selectedItem() {
			return this.$store.$state.contacts.selectContacts || []
		},
		travelerWith(){
			return this.$store.$state.contacts.travelerWith
		}
	},
	watch: {
		async travelerWith(){
			let obj = await	this.getContactsList()
			// this.$nextTick(async () => {
			// 	let res = await this.$aiRequest({
			// 		url: "/app/my/contacts/contactsList",
			// 		method: "POST",
			// 		params: {}
			// 	})
			this.handleSelectContact(obj[0], 1, 0)
			this.formAddFlag = false
			// })
		},
		// 监听出行人数变化
		travellerNumber(newVal, oldVal) {
			if (newVal < this.selectedItem.length) {
				const list = this.selectedItem.splice(0, newVal)
				this.handerFinish(list)
			}
		}
	},
	created() {
		this.$store.commit("contacts/SET_SELECTED_CONTACTS", [])
		uni.$on(Events.chooseTraveler, (checkedData) => {
			// await this.waitReset()
			// 重置模板，防止重复
			// for (let index = 1; index < this.formData.length; index++) {
			// 	const element = this.formData[index];
			// 	for (let idx = 0; idx < element.length; idx++) {
			// 		element[idx].contactId = ''
			// 		element[idx].inputValue = ''
			// 	}
			// }
			// console.log('');
			// this.$emit('resetAll')
			// setTimeout(() => {
				this.reloadDataTraveler(checkedData)
			// }, 2000);
			this.$forceUpdate()
		})
	},
	onunload() {
		uni.off(Events.chooseTraveler)
	},
	methods: {
		waitSelect(element, type) {
			return new Promise(resolve => {
				this.selectedCallback(element, type)
				resolve()
			})
		},
		forFun(){
			for (let index = 1; index < this.formData.length; index++) {
					const element = this.formData[index];
					for (let idx = 0; idx < element.length; idx++) {
						element[idx].contactId = ''
						element[idx].inputValue = ''
					}
				}
		},
		waitReset() {
			return new Promise(resolve => {
				this.forFun()
				resolve()
			})
		},
		editClose() {
			this.$refs.editPopup.$refs.popup.close()
			this.$emit('openEdit', true)
		},
		async reloadDataTraveler(checkedData) {
			let that = this
			let res = await this.$aiRequest({
				url: "/app/my/contacts/contactsList",
				method: "POST",
				params: {}
			})
			let arr = []
			if (res.success) {
				const checkedIds = checkedData.map((item) => {
					return item.contactsId
				})
				that.contactsList = res.data
				that.$store.commit("contacts/SET_SELECTED_CONTACTS", [])
				let arr = that.contactsList
					.filter((item) => {
						return checkedIds.includes(item.contactId)
				})
				that.$store.commit("contacts/SET_SELECTED_CONTACTS", arr)
				//  不需要再执行，下单页的OnShow里面会执行 getContactsList
				// for (let index = 0; index < arr.length; index++) {
				// 	const element = arr[index];

				// 	// 防止循环赋值还没完成，就中断了
				// 	await this.waitSelect(element, 'select')
				// }
			}

		},
		// 是否显示
		isShowContact(item, index) {
			if (index == 0) {
				return true
			}
			let arr = this.selectedItem.filter(
				(_item) => _item.contactId == item[0].contactId
			)
			return arr.length > 0
		},
		// 删除出行人
		handlerDelete(contact, contactId) {
			this.$nextTick(() => {
				// let contactId = contact[0].contactId
				let contactItem = this.contactsList.filter(
					(item) => item.contactId == contactId
				)
				this.handleSelectContact(contactItem[0])
			})
		},
		handleSelectMore(contact, index) {
			this.isRefresh = true
			const checkedTraveler = this.selectedItem?.map((item) => {
				return item.contactId
			})
			this.$navTo("/packageUserCenter/pages/travelerMng/travelerMng", {
				mode: "choose",
				checkedTraveler: JSON.stringify(checkedTraveler ?? []),
				maxCount: this.travellerNumber ?? 1
			})
		},
		// 选择设为默认预订人
		handleSelectChange(item, index) {
			readySubmit(this.formDatas[0], () => {
				this.selectChecked = !this.selectChecked
				this.$forceUpdate()
			})
		},
		createReservation() {
			let params = {}
			let _arr = this.formDatas[0].map((item) => {
				return {
					templateInfoCode: item.customerInfoId,
					templateInfoValue: item.inputValue
				}
			})
			params.contactsItemList = _arr
			this.selectedBooked = params
			let url = "/app/my/contacts/createReservation"
			request({
				url,
				method: "POST",
				params: this.selectedBooked
			})
		},
		submit() {
			if (
				this.travellerNumber !== this.selectedItem.length &&
				this.formDatas.length > 1
			) {
				uni.showToast({
					title: "请选择出行人！",
					icon: "none"
				})
				return
			}
			let checkData = []
			let newFormData = this.formDatas
			//拼接表单用于遍历
			newFormData.map((item,index) => {
				checkData = checkData.concat(
					item.map((item2) => {
						return {
							...item2,
							ranking: index === 0 ? 1 : index
						}
					})
				)
			})
			if (this.selectChecked) this.createReservation()
			this.$emit("changeFormData", checkData)
		},
		setData() {
			this.$emit("setFormData", this.formDatas)
		},
		bindPickerChange: function (e, item, index1, index2) {
			this.carIndex = e.detail.value
			item.valueType = item.papersArr[e.detail.value]
			item.inputValue = item.papersArr[e.detail.value]
		},
		bindPickerChange2(e, item, index1, index2) {
			//证件类型单独处理
			this.carIndex = e.detail.value
			item.valueType = item.papersArr[e.detail.value].validateTypeId
			item.inputValue = item.papersArr[e.detail.value].name
			this.$store.commit(
				"SET_PAPERSTYPE",
				item.papersArr[e.detail.value].validateTypeId
			)
		},
		radioChange(evt, item, index1, index2) {
			item.inputValue = evt.detail.value
			this.$set(this.formDatas[index1], index2, item)
		},
		bindDateChange: function (e, item, index1, index2) {
			this.selectDate = e.detail.value
			item.valueType = e.detail.value
			item.inputValue = e.detail.value
			// this.$set(this.formDatas[index1], index2, item);
		},
		bindTimeChange: function (e, item, index1, index2) {
			this.selectTime = e.detail.value
			item.valueType = e.detail.value
			item.inputValue = e.detail.value
			// this.$set(this.formDatas[index1], index2, item);
		},
		getInfoValue(v) {
			const info =
				v.papersArr.find((item) => {
					return item.validateTypeId == v.valueType
				}) || {}
			return info.name
		},
		getDate(type) {
			const date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()

			if (type === "start") {
				year = year - 60
			} else if (type === "end") {
				year = year + 2
			}
			month = month > 9 ? month : "0" + month
			day = day > 9 ? day : "0" + day
			return `${year}-${month}-${day}`
		},

		// 新增出行人
		handlerAdd() {
			// this.editType = "add"
			// const formData = this.formData[1]
			// this.editFormData = formData.map((item) => {
			// 	if (item.customerInfoId != 41) {
			// 		// 41 证件类型
			// 		item.inputValue = ""
			// 	}
			// 	return item
			// })
			// this.$refs.editPopup.$refs.popup.open()
			// this.$nextTick(() => {
			// 	// 垃圾ios底部导航遮挡问题，所以要把提交订单底部隐藏
			// 	this.$emit('openEdit', false)
			// 	this.$refs.popForm.show(this.editFormData)
			// })
			this.formAddFlag = true
			const url = "/packageUserCenter/pages/orderTravelerAdd/orderTravelerAdd"
      		this.$navTo(
				url,
				{
					pageType: 'add',
					contactAdd: true,
					contact:   ""
				},
				"navigateTo"
			)
		},
		// 编辑出行人
		handlerEdit(item, index) {
			if (index < 1) return
			// this.editType = "edit"
			// this.editFormData = item
			// this.$refs.editPopup.$refs.popup.open()
			// this.$nextTick(() => {
			// 	// 垃圾ios底部导航遮挡问题，所以要把提交订单底部隐藏
			// 	this.$emit('openEdit', false)
			// 	this.$refs.popForm.show(this.editFormData)
			// })
			const url = "/packageUserCenter/pages/orderTravelerAdd/orderTravelerAdd"
      		this.$navTo(
				url,
				{
					pageType: 'edit',
					contact:  JSON.stringify(item) || ""
				},
				"navigateTo"
			)
		},

		// 选择或者取消联系人
		handleSelectContact(contact, index, contactIndex) {
			this.setData()
			this.selectedCallback(JSON.parse(JSON.stringify(contact)), contactIndex)
			this.$forceUpdate()
		},
		// 选择出行人回调
		selectedCallback(contact, contactIndex, type) {
			const newFormData = JSON.parse(JSON.stringify(this.formData))
			let length = this.selectedItem.length
			let select = []
			select = this.selectedItem.filter(
				(item) => item.contactId == contact.contactId
			)
			if (length >= this.travellerNumber && select.length == 0) {
				uni.showToast({
					title: "您只需选择" + this.travellerNumber + "出行人",
					icon: "none"
				})
				return
			}
			this.contactsList.forEach((item) => {
				// 取消选择
				if ((item.contactId == contact.contactId)) {
					if (select.length > 0) {
						item.disabled = false
						let _arr = this.selectedItem.filter(
							(_item) => _item.contactId !== contact.contactId
						)
						this.$store.commit("contacts/SET_SELECTED_CONTACTS", _arr)
						newFormData.forEach((v) => {
							v.forEach((obj) => {
								if (obj.contactId === contact.contactId) obj.contactId = ""
							})
						})
						// isRe = true
						let _contact = JSON.parse(JSON.stringify(contact))
						this.$emit('cancel', {newFormData,contactIndex, contact: _contact})
					} else {
						//  选择
						item.disabled = true
						let _temp = JSON.parse(JSON.stringify(this.selectedItem))
						_temp.push(item)
						this.$store.commit("contacts/SET_SELECTED_CONTACTS", _temp)
					}
				}
			})

			newFormData.forEach((_element,forIndex) => {
				if(forIndex!=0 && forIndex <= this.selectedItem.length){
					_element.forEach((element) => {
						element.contactId = this.selectedItem[forIndex-1].contactId
						// 基础信息
						this.selectedItem[forIndex-1].contactsItemList.forEach((item) => {
							if (element.customerInfoId == item.templateId) {
								element.inputValue = item.templateInfoValue
											// 证件号码 需要判定isMatch
								if (element.customerInfoId == "35") {
									element.inputValue = item.templateInfoValue
								}
							}
						})
						// 证件类型和号码
						this.selectedItem[forIndex-1].contactsCertificate.forEach((item, idx) => {
							item.contactsItemList.forEach((_contact) => {

								if (element.customerInfoId == _contact.templateId) {
									// 证件类型 需要判定templateInfoCode && (element.valueType == _contact.templateInfoCode)
									if (
										element.customerInfoId == "41" &&
										element.customerInfo == _contact.templateInfoCode
									) {
										element.valueType = _contact.templateInfoValue
										element.inputValue = item.certificateType
									} else if (
										element.customerInfoId !== "35" &&
										element.customerInfoId !== "41"
									) {
										element.inputValue = _contact.templateInfoValue
									}

								}
						
							})
						})
						// if (element.customerInfoId == "35") {
						// 	element.inputValue = ""
						// }
					})
				} else if( forIndex > this.selectedItem.length) {
					_element.forEach((element) => {
						element.contactId = ""
						// 基础信息
						contact.contactsItemList.forEach((item) => {
							if (element.customerInfoId == item.templateId) {
								element.inputValue = ""
							}
						})
						// 证件类型
						contact.contactsCertificate.forEach((item) => {
							item.contactsItemList.forEach((_contact) => {
								if (element.customerInfoId == _contact.templateId) {
									element.inputValue = ""
								}
							})
						})
					})
			
				}
			})


			// 证件号码

			// if (contact) {
			// 	contact.contactsItemList.forEach(
			// 		(_contact) => {
			// 			newFormData.forEach((_element,forIndex) => {
			// 				if(forIndex!=0 && forIndex <= this.selectedItem.length){
			// 					_element.forEach((element) => {
			// 						if (element.customerInfoId == _contact.templateId) {
			// 							// 证件号码 需要判定isMatch
			// 							if (element.customerInfoId == "35") {
			// 								element.inputValue = _contact.templateInfoValue
			// 							}
			// 						}
			// 					})
			// 				}
			// 			})
				
			// 		}
			// 	)
			// }
			this.formDatas = newFormData
			this.$emit('setFormData', newFormData)
			this.$forceUpdate()
		},
		// 勾选人员变化
		handerFinish(list) {
			this.$store.commit("contacts/SET_SELECTED_CONTACTS", [])
			this.contactsList.forEach((item) => {
				item.disabled = false
			})
			if (list.length > 0) {
				list.forEach((item) => {
					this.selectedCallback(item)
				})
			}
			this.$refs.selectPopup.$refs.popup.close()
		},

		// 获取常用联系人
		async getContactsList() {
			return new Promise(async resolve => {
				let res = await this.$aiRequest({
					url: "/app/my/contacts/contactsList",
					method: "POST",
					params: {}
				})
				if (res.success) {
					this.contactsList = res.data
					const list = JSON.parse(JSON.stringify(this.selectedItem))
					this.$store.commit("contacts/SET_SELECTED_CONTACTS", [])
					const arr = this.contactsList
						.filter((item) => {
							return list.map((v) => v.contactId).includes(item.contactId)
						})

					for (let index = 0; index < arr.length; index++) {
						const element = arr[index];
						// 防止循环赋值还没完成，就中断了
						await this.waitSelect(element, 'select')
					}
					resolve(res.data)
				}
			})
		},

		// 查询常用预订人
		getReservation() {
			this.$aiRequest({
				url: "/app/my/contacts/reservationList",
				method: "POST",
				params: this.selectedBooked
			}).then((res) => {
				if (res.success) {
					const bookingInfos = res.data || []
					if (bookingInfos.length > 0) {
						const bookingTem = this.formDatas[0]
						const booker = bookingInfos[0]
						bookingTem.forEach((item) => {
							booker.contactsItemList.forEach((v) => {
								if (v.templateId === item.customerInfoId)
									item.inputValue = v.templateInfoValue
							})
						})
						this.formDatas.splice(0, 1, bookingTem)
					}
				}
			})
		}
	}
}
</script>

<style
	lang="scss"
	scoped>
	html,
	body {
		height: 100%;
		box-sizing: border-box;
	}

	.model-title-view {
		padding: 0;
		margin: 0;
	}

	.view-page-exp,
	view{
		box-sizing: border-box;
	}

	.example {
		padding-bottom: 20rpx;
		background-color: #f6f6f6;

		.content-box {
			margin-top: 20rpx;
			background-color: #f6f6f6;
			border-radius: 30rpx;
		}
	}

	.example .person-title-box {
		background-color: white;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 0 30rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 26rpx 26rpx 0 0;

		.title {
			height: 24px;
			font-size: 17px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #262626;
		}

		.common-trip {
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;

			.select-icon {
				width: 44rpx;
				height: 44rpx;
				background: url("https://cdn1.visiotrip.com/h5AndMini/icon-no-select@2x.png") 0 0 no-repeat;
				background-size: 100%;
				margin-left: 10rpx;
			}

			.select-icon.active {
				width: 44rpx;
				height: 44rpx;
				background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/icon_checked.png") 0 0 no-repeat;
				background-size: 100%;
				margin-left: 10rpx;
			}

			.select-text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular-, PingFangSC-Regular;
				font-weight: normal;
				color: $sl-color-dark-grey;
				line-height: 24rpx;
			}
		}
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.radio {
		padding: 0 10rpx;
	}

	.box-input {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: $sl-color-grey;
		margin-left: 8rpx;
	}

	// .certificate-box,
	// .input-edit-box {
	// 	position: relative;
	// 	display: flex;
	// 	align-items: center;
	// 	width: 100%;
	// 	// justify-content: space-between;
	// }

	// .certificate-box::after {
	// 	position: absolute;
	// 	right: 12rpx;
	// 	content: '';
	// 	display: block;
	// 	width:16rpx;
	// 	height:16rpx;
	// 	background:url('https://cdn1.visiotrip.com/h5AndMini/bottom-icon@td2x.png')0 0 no-repeat;
	// 	background-size:100%;
	// }

	.visitor-box {
		padding: 0 30rpx;
		background: #fff;
		width: 100%;
		border-radius: 0 0 26rpx 26rpx;
		position: relative;
		background: #fff;
	}

	.visitor-box .need-number-people {
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.visitor-box .need-number-people .text-number {
		color: #fbf250;
	}

	.visitor-box .contacts-list-box {
		display: flex;
		padding: 34rpx 0 20rpx 0;

		.contacts-item {
			overflow: hidden;
			min-width: 112rpx;
			padding: 0 28rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #b5b5d2;
			border-radius: 16rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: $sl-color-dark-grey;

			&.active {
				border: 1px solid $sl-bg-color-grey;
				position: relative;
				background: $sl-bg-color-grey;
				color: $sl-color-blue;

				.contact-icon {
					width: 36rpx;
					height: 21rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}

		.contacts-item.more {
			width: 112rpx;
			height: 80rpx;
			background: #ffffff;
			font-size: 24rpx;
			color: $sl-color-grey;
			padding: 0;

			.text-box {
				display: flex;
				flex-direction: column;
				margin-right: 4prx;
			}
		}
	}

	.visitor-box .add-btn-box {
		width: 650rpx;
		height: 78rpx;
		background: rgba(229,235,255,0.5);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: $sl-color-blue;
		margin-top: 30rpx;
	}

	.add-icon-img {
		width: 34rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.edit-box {
		flex-shrink: 0;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: $sl-color-grey;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.visitor-box .title {
		font-size: 32rpx;
		color: #000;
		width: 100%;
		padding-bottom: 20rpx;
	}

	.input-group {
		display: flex;
		padding: 20rpx 0;
	}

	.input-group .input-box-group {
		width: 100%;
	}

	.input-group .input-box-group .inputBox:first-child .input-box .box-input-text {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
	}

	.input-group .input-box-group .inputBox:first-child .input-box .label-text {
		display: none;
	}

	.label-img {
      width: 400rpx;
      height: 230rpx;
      margin-top: 20rpx;
    }

	.visitor-box .icon-delete {
		width: 40rpx;
		height: 40rpx;
		margin: auto;
		margin-right: 40rpx;
		flex-shrink: 0;
	}

	.visitor-box .icon-edit {
		width: 42rpx;
		height: 42rpx;
		margin: auto;
		margin-right: 6rpx;
	}

	.inputBox {}

	.inputBox .input-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
		color: #4d4d4d;
		padding: 14rpx 0;
		width: 100%;
		border-bottom: 1px solid #e9e9e9;
	}

	.visitor-info-box .inputBox .input-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
		color: #4d4d4d;
		padding: 2rpx 0;
		width: 100%;
		border-bottom: none;
		&.image {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.inputBox:last-child .input-box {
		border-bottom: none;
	}

	// .input-box-group .inputBox:last-child .input-box{
	// 	border-bottom:none;
	// }

	.inputBox .input-box .label {
		min-width: 5em;
		font-size: 28rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: $sl-color-grey;
	}

	.inputBox .input-box .required {
		position: relative;
		top: 8rpx;
		color: red;
		margin: 0rpx 30rpx 0 8rpx;
	}

	.inputBox .input-box input {
		flex: 1;
	}

	.inputBox .input-box .phone-number {
		display: flex;
		align-items: center;
		color: #000;
		margin-right: 6rpx;
	}

	.inputBox .input-box .phone-number .more:before {
		content: "\e606";
		font-size: 12rpx;
		margin-left: 5rpx;
	}

	// .title{
	//     margin: 26rpx 0 0 24rpx;
	//     height: 24px;
	//     font-size: 17px;
	//     font-family: PingFang SC-Medium, PingFang SC;
	//     font-weight: 500;
	//     color: #262626;
	// }
	.red-box {
		color: #e84625;
	}
</style>
